<template>
	<view class="cart">
		<view class="cart-container" v-if="cartList.length&&userInfo.nickName">
			<view class="cart-title">
				购物车
			</view>
			<!-- 购物车商品列表 -->
			<view class="cart-item" v-for="(item,index) in cartList" :key="item,id">
				<view class="checkbox">
					<text class='iconfont icon-xuanzhong ' :class="{active: item.isSelected}"
						@click="changeSelected(!item.isSelected, index)"></text>
				</view>
				<image class="shop-img" :src="item.listPicUrl" mode=""></image>
				<view class="shop-info">
					<view class="text">
						{{item.name}}
					</view>
					<view class="price">
						{{item.retailPrice}}
					</view>
					<view class="number ">
						<text class="del" @click="onChange(false, index)"> - </text>
						<text class="count"> {{item.count}} </text>
						<text class="add" @click="onChange(true, index)"> + </text>
					</view>
				</view>

			</view>
			<!-- 合计 -->
			<view class="total-container">
				<view class="checkbox">
					<text class='iconfont icon-xuanzhong ' :class="{active: isAllSelected}"
						@click="changeAllSelected(!isAllSelected)"></text>
					<text>已选{{totalCount}}</text>
				</view>
				<view class="all-total">
					合计：<text class="pub">¥{{totalPrice}}</text>
				</view>
				<view class="btn-buy" @click="onBuy">
					去支付
				</view>
			</view>
		</view>
		<view class="cart-nothing" v-else>
			<image src="../../static/images/carts/emptyCart.gif" mode=""></image>
			
			<view class="desc">您的购物车还空着呢，快去逛逛吧</view>
			<view class="btn-shopping" @click="goToShop">
				去逛逛
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				userInfo:{},
			}
		},
		mounted() {
			uni.getStorage({
				key:'userInfo',
				success:(res) => {
					this.userInfo = res.data
				}
			})
		},
		computed: {
			...mapState({
				cartList: state => state.cart.cartList
			}),
			...mapGetters(['isAllSelected', 'totalCount', 'totalPrice'])
		},
		methods: {
			...mapMutations(['delShopList']),
			...mapMutations(['changeIsSelectedMutation']),
			...mapMutations(['changeAllSelectedMutatiion']),

			// 添加或删除商品的的方法
			onChange(isAdd, index) {
				this.delShopList({
					isAdd,
					index
				})
			},
			// 修改选中的状态
			changeSelected(isSelected, index) {
				this.changeIsSelectedMutation({
					isSelected,
					index
				})
			},
			// 全选与全不选
			changeAllSelected(isAllSelected) {
				this.changeAllSelectedMutatiion(isAllSelected)
			},
			// 去支付
			onBuy(){
				uni.navigateTo({
					url:'/pages/order/order'
				})
			},
			// 前往商品页面
			goToShop(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart {
		width: 100vw;
		height: 100vh;
		background: #f5f4f6;

		.cart-container {

			.cart-title {
				margin-left: 20rpx;
				height: 100rpx;
				line-height: 100rpx;
			}

			.cart-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				background: #fff;

				.checkbox {
					position: relative;
					width: 150rpx;
					text-align: center;

					.iconfont {
						font-size: 40rpx;
						color: #ccc;
					}

					.active {
						color: red;
					}
				}

				.shop-img {
					width: 200rpx;
					height: 200rpx;
				}

				.shop-info {
					flex: 1;
					margin: 0 10rpx;

					.price {
						font-size: 32rpx;
						margin: 20rpx 0;
						&::before{
							content: '¥';
							display:inline-block;
							font-size: 24rpx;
						}
					}

					.number {
						text-align: right;

						.del,
						.add,
							{
							display: inline-block;
							width: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							border: 1rpx solid #ccc;
							background: #f8f8f8;
						}

						.count {
							display: inline-block;
							width: 80rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							border-top: 1rpx solid #ccc;
							border-bottom: 1rpx solid #ccc;
						}
					}
				}

			}

			.total-container {
				position: fixed;
				left: 0;
				bottom: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100vw;
				height: 100rpx;
				background: #fff;

				.all-total {
					flex: 1;
					text-align: center;
					.pub{
						color: red;
					}
				}

				.btn-buy {
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					color: #fff;
					background: #dd1a22;
				}

				.checkbox {
					width: 200rpx;

					.iconfont {
						font-size: 40rpx;
						color: #ccc;
					}

					.active {
						color: red;
					}

				}

			}
		}
		
		.cart-nothing{
			position: relative;
			width: 100vw;
			height: 100vh;
			background: #fff;
			image{
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300rpx;
				height: 300rpx;
				
			}
			.desc,.btn-shopping{
				position: absolute;
				top: 55%;
				left: 50%;
				width: 100vw;
				transform: translate(-50%,-50%);
				text-align: center;
				font-size: 28rpx;
			}
			.btn-shopping{
				top: 63%;
				width: 130rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid #ccc;
			}
		}
	}
</style>
